import type { Component } from "@visual/types";

// 公共样式
export const commonStyle = {
  rotate: 0,
  opacity: 1
};

export const commonAttr = {
  // animations: [],
  styleFilter: "",
  events: [],
  dataAliase: {}, //数据别名
  dataBinding: {}, //数据设置，例如设置icon unit等等
  groupStyle: {}, // 当一个组件成为 Group 的子组件时使用
  isLock: false, // 是否锁定组件
  collapseName: "style", // 编辑组件时记录当前使用的是哪个折叠面板，再次回来时恢复上次打开的折叠面板，优化用户体验
  onlyScalePos: false,
  isShow: true,
  conditionFilter: "",
  classConfig: {
    className: "",
    routerPath: "",
    isClassJump: false
  } //科室数据配置，className科室名称，routerPath跳转路径，isClassJump是否开启点击组件跳转
  // linkage: {
  //   duration: 0, // 过渡持续时间
  //   data: [
  //     // 组件联动
  //     {
  //       id: "", // 联动的组件 id
  //       label: "", // 联动的组件名称
  //       event: "", // 监听事件
  //       style: [{ key: "", value: "" }], // 监听的事件触发时，需要改变的属性
  //     },
  //   ],
  // },
};

// 编辑器左侧组件列表
const list: Component[] = [
  {
    component: "VText",
    label: "文字",
    propValue: "双击编辑文字",
    icon: "wenben",
    events: [],
    belong: "middle",
    style: {
      width: 200,
      height: 28,
      fontSize: "",
      fontWeight: 400,
      lineHeight: "",
      letterSpacing: 0,
      textAlign: "",
      color: ""
    }
  },
  {
    component: "layerSwitch",
    label: "切换",
    icon: null,
    events: [],
    belong: "middle",
    onlyScalePos: true,
    propValue: {
      url: "",
      name: "placeholder"
    },
    style: {
      width: 50,
      height: 50,
      visibility: "visible"
    },
    styleFilter: "position"
  },
  {
    component: "VImage",
    label: "Image",
    icon: null,
    events: [],
    belong: "middle",
    onlyScalePos: false,
    propValue: {
      url: "",
      name: "placeholder",
      isDrag: true
    },
    style: {
      visibility: "visible",
      display: "block",
      transform: ""
    }
  },
  {
    component: "ListIndex",
    label: "ListIndex",
    events: [],
    belong: "right",
    icon: null,
    dataAliase: {
      contentList: "attrs",
      title: "name"
    },
    propValue: {
      maxheight: "88px",
      title: "指标",
      contentList: [],
      collapsed: false,
      iconName: "titleLight",
      size: "small",
      isNullHiden: true
    },
    style: {
      width: 415,
      height: 50,
      fontSize: 14,
      visibility: "visible",
      display: "block"
    },
    styleFilter: "width height left top position"
  },
  {
    component: "ComplexComp",
    label: "ComplexComp",
    events: [],
    belong: "right",
    icon: null,
    dataAliase: {
      contentList: "attrs",
      title: "name"
    },
    propValue: {
      maxheight: "88px",
      title: "指标",
      contentList: [],
      collapsed: false,
      iconName: "titleLight",
      size: "small",
      isNullHiden: true
    },
    style: {
      width: 415,
      height: 50,
      fontSize: 14,
      visibility: "visible",
      display: "block"
    },
    styleFilter: "width height left top position"
  },
  {
    component: "ListDepNotice",
    label: "ListDepNotice",
    events: [],
    belong: "right",
    icon: null,
    dataAliase: {
      contentList: "attrs",
      title: "name"
    },
    propValue: {
      maxheight: "88px",
      title: "设备状态",
      contentList: [],
      collapsed: false,
      iconName: "titlefacility",
      size: "normal"
    },
    style: {
      display: "block",
      width: 415,
      height: 50,
      fontSize: 14,
      visibility: "visible"
    },
    styleFilter: "width height left top position"
  },
  {
    component: "ListStat",
    label: "ListStat",
    events: [],
    icon: null,
    belong: "right",
    dataAliase: {
      contentList: "children",
      titleList: "attrs",
      title: "name"
    },
    propValue: {
      maxheight: "650px",
      title: "统计",
      contentList: [],
      collapsed: false,
      iconName: "alert",
      size: "small"
    },
    style: {
      display: "block",
      width: 415,
      height: 60,
      fontSize: 14,
      visibility: "visible"
    },
    styleFilter: "width height left top position"
  },
  {
    component: "waterStat",
    label: "waterStat",
    events: [],
    icon: null,
    belong: "right",
    dataAliase: {
      contentList: "children",
      title: "name"
    },
    propValue: {
      maxheight: "650px",
      title: "用水统计",
      contentList: [],
      collapsed: false,
      iconName: "titlewater"
    },
    style: {
      display: "block",
      width: 415,
      height: 60,
      fontSize: 14,
      visibility: "visible"
    },
    styleFilter: "width height left top position"
  },
  {
    component: "ThreeSupervison",
    label: "ThreeInOne",
    events: [],
    icon: null,
    belong: "right",
    dataAliase: {
      children: "",
      attrs: "",
      title: "name"
    },
    propValue: {
      maxheight: "650px",
      title: "综合监控",
      children: [],
      collapsed: false,
      iconName: "alert"
    },
    style: {
      display: "block",
      width: 415,
      height: 60,
      fontSize: 14,
      visibility: "visible"
    },
    styleFilter: "width height left top position"
  },
  {
    component: "TableAlert",
    label: "TableAlert",
    events: [],
    icon: null,
    belong: "right",
    dataAliase: {
      tableData: "children",
      title: "name"
    },
    propValue: {
      title: "统计",
      tableData: [],
      collapsed: false,
      iconName: "alertTable"
    },
    style: {
      display: "block",
      width: 415,
      height: 203,
      fontSize: 14,
      visibility: "visible"
    },
    styleFilter: "width height left top position"
  },
  {
    component: "TableCom",
    label: "TableCom",
    events: [],
    icon: null,
    belong: "right",
    dataAliase: {
      tableData: "attrs",
      title: "name"
    },
    propValue: {
      title: "统计",
      tableData: [],
      collapsed: false,
      iconName: "alertTable",
      maxHeight: "224px",
      noBorder: true,
      rowKey: "id",
      tableColumns: [
        { prop: "name", label: "气体", minWidth: "60", showOverflowTooltip: true },
        { prop: "input", label: "入口(mg/m3)", minWidth: "60", showOverflowTooltip: true },
        { prop: "output", label: "出口(mg/m3)", minWidth: "60", showOverflowTooltip: true }
      ]
    },
    style: {
      display: "block",
      width: 415,
      height: 203,
      fontSize: 14,
      visibility: "visible"
    },
    styleFilter: "width height left top position"
  },
  {
    component: "TableDetector",
    label: "TableDetector",
    events: [],
    icon: null,
    belong: "right",
    dataAliase: {
      tableData: "children",
      title: "name"
    },
    propValue: {
      title: "统计",
      tableData: [],
      collapsed: false,
      iconName: "titlemonitor",
      maxHeight: "224px",
      noBorder: true,
      rowKey: "id",
      tableColumns: [
        { prop: "facName", label: "地块", minWidth: "160", showOverflowTooltip: true },
        { prop: "checkItem", label: "巡检项", minWidth: "60", showOverflowTooltip: true, fixed: "left" }
      ]
    },
    style: {
      display: "block",
      width: 415,
      height: 203,
      fontSize: 14,
      visibility: "visible"
    },
    styleFilter: "width height left top position"
  },
  {
    component: "ListProgress",
    label: "ListProgress",
    events: [],
    belong: "right",
    icon: null,
    dataAliase: {
      contentList: "attrs",
      title: "name"
    },
    propValue: {
      title: "指标",
      contentList: [],
      collapsed: false,
      iconName: "alert",
      thresholdVlaue: 80,
      isWeeping: false
    },
    style: {
      display: "block",
      width: 415,
      height: 150,
      fontSize: 14,
      visibility: "visible"
    },
    styleFilter: "width height left top position"
  },
  {
    component: "ListMonitor",
    label: "ListMonitor",
    events: [],
    belong: "right",
    icon: null,
    dataAliase: {
      contentList: "children",
      titleList: "attrs",
      title: "name"
    },
    propValue: {
      title: "监视",
      contentList: [],
      collapsed: false,
      iconName: "titlemonitor"
    },
    style: {
      display: "block",
      width: 415,
      height: 150,
      fontSize: 14,
      visibility: "visible"
    },
    styleFilter: "width height left top position"
  },
  {
    component: "ListMonitor2",
    label: "Monitor2",
    events: [],
    belong: "right",
    icon: null,
    dataAliase: {
      contentList: "children",
      titleList: "attrs",
      title: "name"
    },
    propValue: {
      title: "监测2",
      contentList: [],
      collapsed: false,
      iconName: "titlemonitor"
    },
    style: {
      display: "block",
      width: 415,
      height: 150,
      fontSize: 14,
      visibility: "visible"
    },
    styleFilter: "width height left top position"
  },
  {
    component: "equipRouter",
    label: "设备路由",
    events: [],
    belong: "right",
    icon: null,
    dataAliase: {
      contentList: "children",
      titleList: "attrs",
      title: "name"
    },
    propValue: {
      title: "综合监测",
      contentList: [],
      collapsed: false,
      iconName: "titlemonitor"
    },
    style: {
      display: "block",
      width: 415,
      height: 260,
      fontSize: 14,
      visibility: "visible"
    },
    styleFilter: "width height left top position"
  },
  {
    component: "middleTip",
    label: "middleTip",
    events: [],
    belong: "middle",
    icon: null,
    dataAliase: {
      contentList: "attrs",
      title: "name"
    },
    propValue: {
      title: "属性",
      contentList: []
    },
    style: {
      width: 360,
      "max-height": "400px",
      fontSize: 14,
      visibility: "visible"
    },
    styleFilter: ""
  },
  {
    component: "ListInDetect",
    label: "ListInDetect",
    events: [],
    belong: "right",
    icon: null,
    dataAliase: {
      contentList: "attrs",
      title: "name"
    },
    propValue: {
      title: "侦测",
      contentList: [],
      collapsed: false,
      iconName: "titlemonitor",
      isDetect: false
    },
    style: {
      display: "block",
      width: 415,
      height: 150,
      fontSize: 14,
      visibility: "visible"
    },
    styleFilter: "width height left top position"
  },
  {
    component: "ListInDetect2",
    label: "ListInDetect2",
    events: [],
    belong: "right",
    icon: null,
    dataAliase: {
      contentList: "attrs",
      title: "name"
    },
    propValue: {
      title: "侦测",
      contentList: [],
      collapsed: false,
      iconName: "titlemonitor"
    },
    style: {
      display: "block",
      width: 415,
      height: 150,
      fontSize: 14,
      visibility: "visible"
    },
    styleFilter: "width height left top position"
  },
  {
    component: "TextLocation",
    label: "dot点位",
    events: [],
    belong: "middle",
    propValue: {
      msg: "dot点位",
      tip: "dot点位",
      groupName: "",
      typeId: null,
      type: "warn",
      filter: "all sensor layer_base",
      routerKey: "",
      routerPath: "",
      longDisplay: false,
      isCircle: true,
      isEditerlongDisplay: true,
      isPositionRight: true
    },
    dataAliase: {
      msg: "name",
      tip: "name",
      routerKey: "code"
    },
    icon: null,

    style: {
      width: 24,
      height: 31,
      fontSize: 14,
      visibility: "visible"
    }
  },
  {
    component: "FilterMenu",
    label: "位置",
    events: [],
    belong: "widgetHorizontal",
    propValue: {
      title: "位置",
      tip: "双击编辑位置"
    },
    icon: "filter",

    style: {
      width: 294,
      height: 48,
      fontSize: 14,
      visibility: "visible"
    },
    styleFilter: "left top position"
  },
  {
    component: "LayerFilter",
    label: "LayerFilter",
    events: [],
    belong: "widgetVerticalLeft",
    propValue: {},
    icon: null,
    style: {
      width: 40,
      height: 166,
      fontSize: 14,
      visibility: "visible"
    },
    styleFilter: "left top"
  },
  {
    component: "LayerDepFilter",
    label: "LayerDepFilter",
    events: [],
    belong: "widgetVerticalLeft",
    propValue: {
      actionMap: {
        layerDepBase: [],
        layerDepMech: [],
        layerDepWater: [],
        layerDepGas: [],
        layerHse: []
      }
    },
    icon: null,
    style: {
      width: 54,
      height: 258,
      fontSize: 14,
      visibility: "visible"
    },
    styleFilter: "left top"
  },
  {
    component: "DepFilter",
    label: "DepFilter",
    events: [],
    belong: "widgetVertical",
    propValue: {
      activeName: "depelector"
    },
    icon: null,
    style: {
      width: 64,
      height: 264,
      fontSize: 14
    },
    styleFilter: "left top position"
  },
  {
    component: "PosFilter",
    label: "PosFilter",
    events: [],
    belong: "widgetHorizontal",
    propValue: {},
    icon: null,
    style: {
      width: 244,
      height: 40,
      fontSize: 14,
      visibility: "visible"
    },
    styleFilter: "left top position"
  },
  {
    component: "VCamera",
    label: "轮播dot",
    events: [],
    belong: "middle",
    propValue: {
      typeName: [],
      filter: "pos_posalert",
      routerKey: ""
    },
    icon: null,
    onlyScalePos: true,
    style: {
      width: 35,
      height: 42,
      fontSize: 14,
      visibility: "visible"
    }
  },
  {
    component: "VLocation",
    label: "定位",
    belong: "middle",
    events: [],
    propValue: {
      title: "定位",
      tip: "双击编辑定位",
      routerKey: ""
    },
    icon: "location",

    style: {
      width: 58,
      height: 88,
      fontSize: 14,
      visibility: "visible"
    }
  },
  {
    component: "DrillLocation",
    label: "drill",
    belong: "middle",
    events: [],
    propValue: {
      title: "drill",
      tip: "跳转地址",
      routerKey: "",
      routerPath: "",
      longDisplay: true,
      isCircle: false,
      isEditerlongDisplay: true,
      isPositionRight: true
    },
    dataAliase: {
      routerKey: "code",
      title: "name",
      tip: "name"
    },
    icon: null,
    onlyScalePos: true,
    style: {
      width: 24,
      height: 31,
      fontSize: 14,
      visibility: "visible"
    }
  },
  {
    component: "DrillLocation2",
    label: "drill2",
    belong: "middle",
    events: [],
    propValue: {
      title: "drill",
      tip: "跳转地址",
      routerKey: "",
      routerPath: "",
      longDisplay: true,
      isCircle: false,
      isEditerlongDisplay: true,
      isPositionRight: true
    },
    dataAliase: {
      routerKey: "code",
      title: "name",
      tip: "name"
    },
    icon: null,
    onlyScalePos: true,
    style: {
      width: 24,
      height: 31,
      fontSize: 14,
      visibility: "visible"
    }
  },
  {
    component: "ColorLocation",
    label: "ColorLoc",
    belong: "middle",
    events: [],
    propValue: {
      title: "ColorLoc",
      tip: "",
      routerKey: "",
      type: "camera",
      filter: "menu_all menu_camera"
    },
    icon: null,
    onlyScalePos: true,
    dataAliase: {
      routerKey: "code",
      title: "name",
      tip: "name"
    },
    style: {
      width: 70,
      height: 40,
      fontSize: 14,
      visibility: "visible"
    }
  },
  {
    component: "RectLocation",
    label: "RectLoc",
    belong: "middle",
    events: [],
    propValue: {
      title: "RectLoc",
      tip: "",
      routerKey: "",
      type: "camera",
      filter: "menu_all menu_camera",
      cameraUrl: "",
      code: "",
      category: "",
      groupName: ""
    },
    dataAliase: {
      cameraUrl: "rtspUrl",
      tip: "eqpName"
    },
    icon: null,
    onlyScalePos: true,
    style: {
      width: 40,
      height: 52,
      fontSize: 14,
      visibility: "visible"
    }
  },
  {
    component: "MessageLocation",
    label: "信息定位",
    events: [],
    belong: "middle",
    propValue: {
      children: [
        {
          name: null,
          value: null
        }
      ],
      filter: "",
      routerKey: "",
      index: 0,
      unit: "tCO₂e",
      iconName: "co2",
      type: "msg",
      name: "",
      value: 0
    },
    icon: null,
    onlyScalePos: true,
    style: {
      width: 175,
      height: 88,
      fontSize: 14,
      visibility: "visible"
    }
  },
  {
    component: "VButton",
    label: "按钮",
    propValue: "按钮",
    events: [],
    icon: "button",
    style: {
      width: 100,
      height: 34,
      borderWidth: 1,
      borderColor: "",
      borderRadius: "",
      fontSize: "",
      fontWeight: 400,
      lineHeight: "",
      letterSpacing: 0,
      textAlign: "",
      color: "",
      backgroundColor: "",
      visibility: "visible"
    }
  },
  {
    component: "VTable",
    label: "表格",
    icon: "biaoge",
    events: [],
    propValue: {
      data: [
        ["表头1", "表头2", "表头3"],
        ["内容1", "内容2", "内容3"]
      ],
      stripe: true,
      thBold: true
    },
    request: {
      method: "GET",
      data: [],
      url: "",
      series: false,
      time: 1000,
      paramType: "", // string object array
      requestCount: 0 // 请求次数限制，0 为无限
    },
    style: {
      width: 600,
      height: 200,
      fontSize: "",
      fontWeight: 400,
      textAlign: "center",
      color: "",
      backgroundColor: "rgba(255, 255, 255, 1)",
      visibility: "visible"
    }
  },
  {
    component: "VChart",
    label: "图表",
    icon: "px-DataAnalysis",
    events: [],
    propValue: {
      chart: "VChart",
      option: {
        title: {
          text: "柱状图",
          show: true
        },
        legend: {
          show: true
        },
        tooltip: {
          show: true,
          trigger: "item"
        },
        xAxis: {
          show: true,
          data: ["A", "B", "C", "D", "E"]
        },
        yAxis: {},
        series: {
          type: "bar",
          name: "销量",
          data: [23, 61, 35, 77, 35],
          itemStyle: {
            barBorderRadius: 5,
            borderWidth: 1,
            borderType: "solid",
            borderColor: "#73c0de",
            shadowColor: "#5470c6",
            shadowBlur: 3
          }
        }
      }
    },
    style: {
      width: 800,
      height: 500,
      borderRadius: "",
      visibility: "visible"
    }
  },
  {
    component: "VChartPie",
    label: "饼图",
    icon: null,
    events: [],
    belong: "right",
    styleFilter: "width height left top position",
    dataAliase: {
      contentList: "children",
      title: "name",
      innerLabel: "ext1"
    },
    propValue: {
      chart: "VChartPie",
      option: {
        tooltip: {
          trigger: "item"
        },
        legend: {
          top: "middle",
          right: "5%",
          orient: "vertical",
          formatter: "",
          icon: "circle",
          textStyle: {}
        },
        series: [
          {
            type: "pie",
            radius: ["60%", "80%"],
            center: ["21%", "50%"],
            avoidLabelOverlap: false,
            tooltip: {
              trigger: "item",
              // 自定义 tooltip 显示内容
              formatter: ""
            },
            label: {
              show: true,
              position: "center",
              formatter: "",
              rich: {
                value: {
                  fontSize: 17,
                  align: "center"
                },
                a: {
                  fontSize: 13,
                  align: "center"
                }
              }
            },
            data: []
          }
        ]
      },
      contentList: [],
      title: "饼图",
      innerLabel: "",
      collapsed: false,
      iconName: "sensor"
    },
    style: {
      width: 415,
      height: 255,
      display: "block",
      borderRadius: "",
      visibility: "visible"
    }
  },
  {
    component: "VChartGauge",
    label: "仪表盘",
    icon: null,
    events: [],
    belong: "right",
    dataAliase: {
      contentList: "attrs",
      title: "name"
    },
    styleFilter: "width height left top position",
    propValue: {
      chart: "VChartLine",
      option: {
        series: []
      },
      contentList: [],
      title: "数据查看",
      collapsed: false,
      iconName: "sensor"
    },
    style: {
      width: 415,
      height: 400,
      display: "block",
      borderRadius: "",
      visibility: "visible"
    }
  },

  {
    component: "VChartLine",
    label: "折线",
    icon: null,
    events: [],
    belong: "right",
    dataAliase: {
      contentList: "attrs",
      title: "name"
    },
    styleFilter: "width height left top position",
    propValue: {
      chart: "VChartLine",
      option: {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985"
            }
          }
        },
        legend: {
          data: ["流量", "出水压力"],
          icon: "rect", // 设置图例图标为小长方形
          itemWidth: 12.5, // 将图例图标的宽度设置为默认值的一半
          itemHeight: 4 // 将图例图标的高度设置为默认值的一半
        },
        xAxis: {
          type: "category",
          boundaryGap: false
        },
        yAxis: [
          {
            type: "value",
            name: "流量(m³/h)",
            position: "left",
            axisLabel: {
              formatter: "{value} "
            }
          },
          {
            type: "value",
            name: "出水压力(MPa)",
            position: "right",
            axisLabel: {
              formatter: "{value} "
            },
            splitLine: {
              show: false
            }
          }
        ],
        series: [
          {
            name: "流量",
            type: "line",
            symbol: "rect",
            yAxisIndex: 0,
            data: [120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90, 230, 210, 120, 132, 101]
          },
          {
            name: "出水压力",
            symbol: "rect",
            type: "line",
            yAxisIndex: 1,
            data: [220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290, 330, 310, 220, 182, 191]
          }
        ]
      },
      contentList: [],
      title: "数据查看",
      collapsed: false,
      iconName: "sensor"
    },
    style: {
      width: 415,
      height: 400,
      display: "block",
      borderRadius: "",
      visibility: "visible"
    }
  },
  {
    component: "VChartBar",
    label: "柱状图",
    icon: null,
    events: [],
    belong: "right",
    dataAliase: {
      contentList: "attrs",
      title: "name"
    },
    styleFilter: "width height left top position",
    propValue: {
      chart: "VChartBar",
      contentList: [],
      title: "数据查看",
      collapsed: false,
      iconName: "sensor"
    },
    style: {
      width: 415,
      height: 400,
      display: "block",
      borderRadius: "",
      visibility: "visible"
    }
  },
  {
    component: "ColorMarking",
    label: "ColorMarking",
    events: [],
    belong: "left",
    icon: null,
    dataAliase: {
      contentList: "attrs",
      title: "name"
    },
    propValue: {
      title: "属性",
      contentList: []
    },
    style: {
      fontSize: 14,
      visibility: "visible",
      display: "block",
      width: 352,
      height: 150
    },
    styleFilter: "width height left top position"
  },
  {
    component: "FabAlert",
    label: "Fab报警",
    icon: null,
    events: [],
    belong: "right",
    dataAliase: {
      contentList: "attrs",
      title: "name"
    },
    styleFilter: "width height left top position",
    propValue: {
      chart: "VChartBar",
      contentList: [],
      title: "数据查看",
      collapsed: false,
      iconName: "sensor"
    },
    style: {
      width: 415,
      height: 800,
      display: "block",
      borderRadius: "",
      visibility: "visible"
    }
  }
  // {
  //   component: "Scale",
  //   label: "Scale",
  //   events: [],
  //   belong: "widgetVerticalLeft",
  //   propValue: {},
  //   icon: null,
  //   style: {
  //     width: 52,
  //     height: 200
  //   },
  //   styleFilter: "left top"
  // }
];

for (let i = 0, len = list.length; i < len; i++) {
  const item = list[i];
  item.style = { ...commonStyle, ...item.style };

  list[i] = { ...commonAttr, ...item };
}

export default list;
